<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.form-pwd .form-input,.form-pwd .form-input-no{
		border: 1px solid #ccc; 
        padding: 7px 0px;
        border-radius: 3px; /*css3属性IE不支持*/
        padding-left:5px;
        
	}
	.div-form{
		text-align: center;
	}
	.form-input:focus{
		 -webkit-box-shadow: 0 0 5px #bbbbbb;/*点击input 外阴影*/
         -moz-box-shadow:0 0 5px #bbbbbb;
         box-shadow: 0 0 5px #bbbbbb;
         border-color:#fff ;/*黑色边框改为白色*/
         outline:0;/*去掉默认谷歌点击input边框显示蓝色  */
         background: #fff;/*input内背景为白色*/
	}
	.form-input-no{
		-webkit-box-shadow: 0 0 5px #c10100;/*点击input 外阴影*/
         -moz-box-shadow:0 0 5px #c10100;
         border-color:#ffbbbb ;
         outline:0;/*去掉默认谷歌点击input边框显示蓝色  */
         background: #fff;/*input内背景为白色*/
	}
	.form-button{
		width: 120px; /* 宽度 */
		height: 30px; /* 高度 */
		border-width: 0px; /* 边框宽度 */
		border-radius: 3px; /* 边框半径 */
		background: #1E90FF; /* 背景颜色 */
		cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
		outline: none; /* 不显示轮廓线 */
		font-family: Microsoft YaHei; /* 设置字体 */
		color: white; /* 字体颜色 */
		font-size: 14px; /* 字体大小 */
	}
	.form-button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}
</style>
</head>
<body>
	<div class="div-form" style="height: 160px;">
		<form action="editsave"  class="form-pwd" method="post">
			<p class="displ"><b>原&emsp;密&emsp;码:</b><input type="password" class="form-input" name="password" id="form-input"></p>
			<p class="disp" style="display:none"><b>新&emsp;密&emsp;码:</b><input type="password" class="form-input" id="xmm" name="xmm"></p>
			<p class="disp" style="display:none"><b>重复新密码:</b><input type="password" class="form-input" name="cmm" id="cmm"></p>
			<p >
				&emsp;<font id="pwd-no" style="color: #ca0c16;display:none"><i class="fa fa-warning"></i>原密码输入错误</font>
			</p>
			<p>
				<button type="button" id="form-button" class="form-button displ"><i class="fa fa-unlock"></i>&nbsp;校验原密码</button>
				<button type="button" id="form-button-yes" class="form-button disp" style="display:none"><i class="fa fa-unlock-alt"></i>&nbsp;确认修改</button>
			</p>
		</form>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$('#form-button').click(function(){
			var ymm=$("input[name='password']").val();
			$.post('QueryPassword?password='+ymm, function(data){
				if(data){
					$(".disp").show();
					$('.displ').hide();
					$('#pwd-no').html('<i class="fa fa-unlock"></i>&nbsp;修改密码</button>');
				}else{
					$("#form-input").removeClass("form-input").addClass("form-input-no");
					$("#pwd-no").show();
				}
			});
		});
		$('#form-input,#xmm,#cmm').click(function(){
			$("#form-input,#xmm,#cmm").removeClass("form-input-no").addClass("form-input");
			$("#pwd-no").hide();
		});
		
		$("#form-button-yes").click(function(){
			var xmm=$("input[name='xmm']").val();
			var cmm=$("input[name='cmm']").val();
			if(xmm.length<6){
				$('#xmm').removeClass("form-input").addClass("form-input-no");
				$('#pwd-no').html('<i class="fa fa-close"></i>&nbsp;新密码少于6位！</button>');
				$("#pwd-no").show();
			}else if(cmm.length<6){
				$('#cmm').removeClass("form-input").addClass("form-input-no");
				$('#pwd-no').html('<i class="fa fa-close"></i>&nbsp;重复输入的密码少于6位！</button>');
				$("#pwd-no").show();
			}else if(xmm!=cmm){
				$('#cmm').removeClass("form-input").addClass("form-input-no");
				$('#pwd-no').html('<i class="fa fa-close"></i>&nbsp;两次密码输入不一样！</button>');
				$("#pwd-no").show();
			}else{
				$(".form-pwd").submit();
			}
		});
		
		$(window).bind("keydown", function(e){
			if(e.keyCode == 13) {
				var ymm=$("input[name='password']").val();
				$.post('QueryPassword?password='+ymm, function(data){
					if(data){
						$(".disp").show();
						$('.displ').hide();
						$("#pwd-no").hide();
					}else{
						$("#form-input").removeClass("form-input").addClass("form-input-no");
						$("#pwd-no").show();
					}
				});
			}
		});
	});
</script>
</html>